import React from 'react';
import { Swiper } from 'antd-mobile';
import './comCss/categoryCarousel.scss'

// 分类项类型
interface CategoryItem {
  icon: string; // 图片地址
  label: string; // 分类名称
}

// 组件props
interface CategoryCarouselProps {
  categories: CategoryItem[];
  pageSize?: number; // 每页显示多少个，默认10
}

const CategoryCarousel: React.FC<CategoryCarouselProps> = ({ categories, pageSize = 10 }) => {
  // 分页
  const pages: CategoryItem[][] = [];
  for (let i = 0; i < categories.length; i += pageSize) {
    pages.push(categories.slice(i, i + pageSize));
  }

  return (
    <div className="category-carousel">
      <Swiper loop>
        {pages.map((page, idx) => (
          <Swiper.Item key={idx}>
            <div className="category-page">
              {page.map((item, i) => (
                <div className="category-item" key={i}>
                  <div className="category-icon">
                    <img src={item.icon} alt={item.label} />
                  </div>
                  <div className="category-label">{item.label}</div>
                </div>
              ))}
            </div>
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  );
};

export default CategoryCarousel;